<template>
  <div class="container">
    <div class="back-btn" @click="back()"></div>
    <div class="scene-title">机场</div>
    <div
      class="scene-image"
    >

      <div class="screen screen1">
        <div class="s-left">
          <div v-for="i in 9" :key="i" class="s-left-item"></div>
        </div>
        <div class="s-right">
          <div v-for="i in 90" :key="i" class="s-right-item"></div>
        </div>
      </div>
      <div class="screen screen2">
        <div class="s-left">
          <div v-for="i in 9" :key="i" class="s-left-item"></div>
        </div>
        <div class="s-right">
          <div v-for="i in 90" :key="i" class="s-right-item"></div>
        </div>
      </div>
      <div class="screen screen3">
        <div class="s-left">
          <div v-for="i in 9" :key="i" class="s-left-item"></div>
        </div>
        <div class="s-right">
          <div v-for="i in 90" :key="i" class="s-right-item"></div>
        </div>
      </div>
      <div class="screen screen4">
        <div class="s-left">
          <div v-for="i in 9" :key="i" class="s-left-item"></div>
        </div>
        <div class="s-right">
          <div v-for="i in 90" :key="i" class="s-right-item"></div>
        </div>
      </div>
      <div class="screen screen5">
        <div class="s-left">
          <div v-for="i in 9" :key="i" class="s-left-item"></div>
        </div>
        <div class="s-right">
          <div v-for="i in 90" :key="i" class="s-right-item"></div>
        </div>
      </div>
      <img :draggable="false" src="../assets/images/sence/airport/airport-sence.png" alt="">
      <div
        id="robot"
        :class="['robot', isStart ? 'run' : '']"
        @dragenter="handleDragEnter"
        @dragleave="handleDragleave"
        @dragexit="handleDragexit"
      >
        <div class="tips" v-if="targetStatus === 'success'">
          <img src="../assets/images/sence/airport/tips.png" alt="">
        </div>
<!--        <img :draggable="false" v-if="isStart" src="../assets/images/sence/robot-start.png" alt="">-->
        <template v-if="isBack">
          <img :draggable="false" src="../assets/images/sence/airport/robot-back.png" alt="">
        </template>
        <template v-else>
          <img :draggable="false" v-if="targetStatus === 'active'" src="../assets/images/sence/airport/robot-active.png" alt="">
          <img :draggable="false" v-else-if="targetStatus === 'enter'" src="../assets/images/sence/airport/robot-run.png" alt="">
          <img :draggable="false" v-else-if="targetStatus === 'error'" src="../assets/images/sence/airport/robot-error.png" alt="">
          <img :draggable="false" v-else-if="targetStatus === 'success'" src="../assets/images/sence/airport/robot-start.png" alt="">
          <img :draggable="false" v-else src="../assets/images/sence/airport/robot-default.png" alt="">
        </template>
<!--        <img :draggable="false" src="../assets/images/sence/robot-default.png" alt="">-->
<!--        <img :draggable="false" src="../assets/images/sence/robot-default.png" alt="">-->
      </div>
    </div>
    <div class="chip" v-if="targetStatus !== 'success'">
      <div class="chip-item" @dragstart="(e) => handleDragstart(e, 910)" @dragend="(e) => handleDragend(e, 910)">
        <img class="draggable" :draggable="isStart === null" v-if="active910" src="../assets/images/common/910-active.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="success910" src="../assets/images/common/910-success.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="error910" src="../assets/images/common/910-error.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else src="../assets/images/common/910-default.png" alt="">
      </div>
      <div class="chip-item" @dragstart="(e) => handleDragstart(e, 310)" @dragend="(e) => handleDragend(e, 310)">
        <img class="draggable" :draggable="isStart === null" v-if="active310" src="../assets/images/common/310-active.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="success310" src="../assets/images/common/310-success.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="error310" src="../assets/images/common/310-error.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else src="../assets/images/common/310-default.png" alt="">
      </div>
    </div>
<!--    <div class="chip-tips" v-if="targetStatus !== 'success'">把芯片拖动到对应的边缘设备</div>-->
    <div class="run-tip success" v-if="targetStatus === 'success'">成功运行~</div>
    <div class="run-tip error" v-if="targetStatus === 'error'">{{ rightChip === 310 ? 910 : 310 }}芯片不适合边缘计算！</div>
    <div class="run-success" v-if="targetStatus === 'success'">
      <div class="left">
        <div class="arrow img-box">
          <img :draggable="false" src="../assets/images/common/temp-up.png" alt="">
        </div>
        <div class="temp img-box">
          <div class="temp-up-box">
            <div class="aa"></div>
            <div class="bb"></div>
          </div>
          <img :draggable="false" src="../assets/images/common/temp-em.png" alt="">
        </div>
      </div>
      <div class="right">
        <div class="chart-box">
          <div class="chart">
<!--            <div class="chart-bg">-->
<!--              <img src="../assets/images/common/chart-bg.png" alt="">-->
<!--            </div>-->
            <div class="chart-line">
              <img :draggable="false" src="../assets/images/common/chart.png" alt="">
            </div>
          </div>
          <p>数据吞吐量 单位：MB</p>
        </div>
        <div class="img-box right-arrow">
          <img :draggable="false" src="../assets/images/common/temp-up.png" alt="">
        </div>
      </div>
    </div>
    <div class="run-error"></div>
    <van-popup style="width: 100%; display: flex; justify-content: center" v-model="showTips" :overlay="false">
      <p class="success-tip" v-if="targetStatus === 'success'">成功运行</p>
      <p class="error-tip" v-else>{{ rightChip === 310 ? 910 : 310 }}芯片不适合边缘计算！</p>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'Airport',
  components: {},
  data() {
    return {
      rightChip: 310,
      isStart: null,
      current: null,
      active310: false,
      error310: false,
      success310: false,
      active910: false,
      error910: false,
      success910: false,
      targetStatus: 'default',
      toTarget: false,
      showTips: false,
      isBack: false
      // activeTarget: false,
      // enterTarget: false,
      // successTarget: false,
      // errorTarget: false,
    }
  },
  computed: {},
  created() {
  },
  mounted() {
    // 全局存状态后，再次进来后的逻辑
    const animationDom = document.getElementById('robot')
    animationDom.addEventListener('animationiteration', this.changeBack);
    if (this.$store.getters.airport === true) {
      this.toTarget = true
      this.isStart = true
      this.handleDragend(null, this.rightChip)
    }
    if (this.$store.getters.airport === false) {
      this.toTarget = true
      this.isStart = false
      this.handleDragend(null, this.rightChip)
    }
  },
  methods: {
    changeBack() {
      this.isBack = false
      setTimeout(() => {
        this.isBack = true
      }, 7500)
    },
    handleDragEnter(e) {
      console.log(e, 'enter')
      this.toTarget = true
      this.isStart = this.current === this.rightChip
      this['success' + this.current] = this.isStart
      this['error' + this.current] = !(this.isStart)
      const animationDom = document.getElementById('robot')
      animationDom.style.animationPlayState = 'paused'
      this.targetStatus = 'enter'
      e.preventDefault()
    },
    handleDragstart(e, name) {
      const sibName = name === 310 ? 910 : 310
      this['active' + sibName] = false
      this['error' + sibName] = false
      this['success' + sibName] = false
      this.current = name
      this['active' + name] = true
      this.targetStatus = 'active'
      console.log(e, 'dragstart', name)
    },
    handleDragend(e, name) {
      if (!this.toTarget) {
        this.isStart = null
        this.current = null
        this.active310 = false
        this.error310 = false
        this.success310 = false
        this.active910 = false
        this.error910 = false
        this.success910 = false
        this.targetStatus = 'default'
        this.toTarget = false
        this.showTips = false
        this.isBack = false
        return
      }
      this.current = null
      this['active' + name] = false
      const animationDom = document.getElementById('robot')
      animationDom.style.animationPlayState = ''
      this.targetStatus = this.isStart ? 'success' : 'error'
      this.$store.dispatch('app/setAirportStatus', this.isStart)
      if (this.isStart) {
        setTimeout(() => {
          this.isBack = true
        }, 7500)
      } else {
        setTimeout(() => {
          this.isStart = null
          this.current = null
          this.active310 = false
          this.error310 = false
          this.success310 = false
          this.active910 = false
          this.error910 = false
          this.success910 = false
          this.targetStatus = 'default'
          this.toTarget = false
          this.showTips = false
          this.isBack = false
        }, 2000)
      }

      // this.showTips = true
      // setTimeout(() => {
      //   this.showTips = false
      // }, 3000)
      console.log(e, 'dragend', name)
    },
    handleDragleave(e) {
      if (!this.toTarget || !['success', 'error'].includes(this.targetStatus) ) return
      const dom = document.querySelector('.dnd-poly-drag-image')
      // console.log(dom, 'ddddd')
      if (dom) {
        dom.style.display = 'none'
      }
      // console.log(e, 'dragleave')
    },
    handleDragexit(e) {
      this.toTarget = false
      console.log(e, 'handleDragexit')
    },
    back() {
      this.$router.push({
        name: 'Home'
      })
    },
  },
  beforeDestroy() {
    // 全局存状态后，再次进来后的逻辑
    // const animationDom = document.getElementById('robot')
    // console.log(animationDom, 'animationDom')
    // animationDom.removeEventListener('animationiteration', this.changeBack);
  },
}
</script>

<style scoped lang="less">
/* 定义动画 */
@keyframes moving {
  0% {
    transform: translate(0, 0);
  }
  50% {
    //animation-timing-function: step-end;
    transform: translate(130px, 75px); /* 斜线路径 */
  }
  100% {
    transform: translate(0, 0);
  }
}

/* 应用动画到元素 */
.run {
  //animation: bling 0s ease-in-out forwards;
  //animation-iteration-count: infinite;
  animation-name: moving;
  animation-duration: 15s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  //animation-iteration-count: 1;
  animation-direction: normal;
  //animation-timing-function: step-end;
  animation-timing-function: linear;
  //animation-timing-function: cubic-bezier(1, 1, 1, 1);
  animation-fill-mode: none;
  //animation-play-state: paused;
  //animation-fill-mode: forwards;
}

.scene-image {
  .robot {
    //bottom: 36%;
    //left: 10%;
    bottom: 36%;
    left: 20%;
    position: absolute;
    z-index: 4;
    img {
      width: 100%;
      height: auto;
    }
    .tips {
      z-index: 4;
      position: absolute;
      width: 100px;
      top: 0;
      transform: translate(-35%, -100%); /* 斜线路径 */
    }
    //bottom: 30%;
    //left: 18%;
    //background-image: url("../assets/images/sence/robot-default.png");
    //background-repeat: no-repeat;
    //background-position: center;
    //background-size: contain;
  }

}
@keyframes loop {
  0% {
    transform: translate(0, 0);
  }
  100% {
    //animation-timing-function: step-end;
    transform: translate(0, -90px); /* 斜线路径 */
  }
}
.screen {
  position: absolute;
  background-color: #1a1b1a;
  width: 20px;
  height: 14px;
  display: flex;
  overflow: hidden;
  z-index: 3;
  .s-left {
    width: 35%;
    .s-left-item {
      width: 100%;
      height: 1px;
      background-color: #145b57;
      margin: 1px 0;
    }
  }
  .s-right {
    //position: absolute;
    width: 60%;
    margin-left: 5%;
    //left: 40%;
    //top: 0;
    animation-name: loop;
    animation-duration: 40s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    //animation-iteration-count: 1;
    animation-direction: normal;
    //animation-timing-function: step-end;
    animation-timing-function: linear;
    //animation-timing-function: cubic-bezier(1, 1, 1, 1);
    animation-fill-mode: none;
    .s-right-item {
      width: 100%;
      height: 1px;
      margin: 2px 0;
      background: linear-gradient(45deg, #3ab654, #9ab5a3, #3ab654);
    }
  }
  &.screen1 {
    top: 77px;
    left: 58px;
    //transform: rotate(10deg); /* 顺时针旋转45度 */
    transform: skew(-1deg, -30deg); /* 水平倾斜30度，垂直倾斜20度 */
  }
  &.screen2 {
    top: 57px;
    left: 95px;
    //transform: rotate(10deg); /* 顺时针旋转45度 */
    transform: skew(-1deg, -30deg); /* 水平倾斜30度，垂直倾斜20度 */
  }
  &.screen3 {
    top: 39px;
    left: 129px;
    //transform: rotate(10deg); /* 顺时针旋转45度 */
    transform: skew(-1deg, -30deg); /* 水平倾斜30度，垂直倾斜20度 */
  }
  &.screen4 {
    top: 90px;
    left: 143px;
    //transform: rotate(10deg); /* 顺时针旋转45度 */
    transform: skew(-1deg, -30deg); /* 水平倾斜30度，垂直倾斜20度 */
  }
  &.screen5 {
    top: 68px;
    left: 186px;
    width: 18px;
    //transform: rotate(10deg); /* 顺时针旋转45度 */
    transform: skew(-1deg, -30deg); /* 水平倾斜30度，垂直倾斜20度 */
  }
}
</style>
